<template>
  <BasicModal
  :title="isEdit ? '编辑' : '新增'"
  v-bind="$attrs"
  :width="460"
  @ok="onConfirm"
  :loading="loading"
  @register="register"
  >
    <Form 
    ref="formRef"
    :model="formState"
    :label-col="{ style: { width: '120px' } }"
    > 
      <FormItem label="房间名称" name="roomId" required >
        <Select v-model:value="formState.roomId" @select="onRoomSelect" >
          <SelectOption v-for="item in props.roomOptions" 
          :key="item.id" 
          :value="item.id" 
          :room="item" >{{ item.name }}</SelectOption>
        </Select>
      </FormItem>
      <FormItem label="房间类型" name="type" required >
        <Select v-model:value="formState.type" disabled >
          <SelectOption 
          v-for="item in props.roomTypeOpts" 
          :key="item.value" 
          :value="item.value" >{{ item.label }}</SelectOption>
        </Select>
      </FormItem>
      <FormItem label="状态" name="status" required >
        <Select v-model:value="formState.status" placeholder="请选择" disabled >
          <SelectOption 
          v-for="item in orderStatusOptions" 
          :key="item.value" 
          :value="item.value" >{{ item.label }}</SelectOption>
        </Select>
      </FormItem>
      <FormItem label="预约人" name="orderName" required >
        <Input v-model:value="formState.orderName" placeholder="请输入" />
      </FormItem>
      <FormItem label="预约时段" name="orderTime" >
        <PreviewDate />
      </FormItem>
      <FormItem label="预约开始时间" name="orderDate" required >
        <DatePicker 
        class="w-full" 
        showTime 
        format="YYYY-MM-DD HH:mm" 
        :disabled-date="getDisableDate"
        v-model:value="formState.orderDate" 
        placeholder="请输入" />
      </FormItem>
      <FormItem label="预约结束时间" name="orderEndDate" required >
        <DatePicker 
        showTime 
        class="w-full"
        format="YYYY-MM-DD HH:mm" 
        :disabled-date="getDisableDate"
        v-model:value="formState.orderEndDate" placeholder="请输入" />
      </FormItem>
      <FormItem label="联系电话" name="phone" required >
        <Input v-model:value="formState.phone" />
      </FormItem>
      <FormItem label="客户来源" name="source" required >
        <Select v-model:value="formState.source" placeholder="请选择" >
          <SelectOption  v-for="item in customSourceOpts" :key="item.value" :value="item.value" >{{ item.label }}</SelectOption>
        </Select>
      </FormItem>
      
    </Form>
  </BasicModal>
</template>

<script lang="ts" setup>
import { get } from 'lodash-es'
import { reactive, ref, defineEmits } from 'vue'
import { addOrdered, editOrdered } from '@/api/ordered'
import { AddRoomParams } from '@/api/roomManage/model';
import { BasicModal, useModalInner } from '@/components/Modal'
import { Form, FormItem, SelectOption, Select, Input, FormInstance, DatePicker } from 'ant-design-vue'
import { ModalTypeEnum } from '@/enums/appEnum';
import { orderStatusOptions } from './settings'
import dayjs, { Dayjs } from 'dayjs';
import PreviewDate from '@/components/PreviewDate'
import { IDictionaryOpts } from '@/api/dictionary/model';
import { IOrderedData } from '@/api/ordered/model';

const isEdit = ref(false);
const loading = ref(false);

const emits = defineEmits(['confirm']);

const [register] = useModalInner((data) => {
  const modalType = get<ModalTypeEnum>(data, 'type', ModalTypeEnum.Add);
  if (modalType === ModalTypeEnum.Add) {
    isEdit.value = false;
    formRef.value?.resetFields();
  } else {
    isEdit.value = true;
    formState.id = get(data, 'id');
  }
})

const props = defineProps<{
  roomOptions: AddRoomParams[],
  customSourceOpts: IDictionaryOpts[],
  roomTypeOpts: IDictionaryOpts[]
}>()

const formRef = ref<FormInstance>();

const formState = reactive<IOrderedData>({
  roomId: '',
  id: '',
  status: '0',
  orderDate: '',
  orderEndDate: '',
  orderName: '',
  source: '',
  remainingTime: '',
  phone: '',
  type: '',
  room: ''
});

function getDisableDate(current: Dayjs) {
  const date = new Date();
  date.setDate(date.getDate() - 1);
  return current && current < dayjs(date).endOf('day');
}

async function onConfirm() {
  try {
    const formData  = await formRef.value?.validate() as IOrderedData;
    formData.roomId = String(formData.roomId);
    formData.room = formState.room;
    formData.orderDate = dayjs(formData.orderDate).format('YYYY-MM-DD HH:mm');
    formData.orderEndDate = dayjs(formData.orderEndDate).format('YYYY-MM-DD HH:mm');
    loading.value = true;

    if (isEdit.value) {// 编辑
      await editOrdered(formData);
      loading.value = false;
      emits('confirm');
    } else {// 新增
      const ouputData = { ...formData };
      await addOrdered(ouputData);
      loading.value = false;
      emits('confirm');
    }
  } catch (err) {
    loading.value = false;
  }
}

function onRoomSelect(_: any, args: any) {
  formState.type = get(args, 'room.type');
  formState.room = get(args, 'room.name');
}

</script>